<!-- 饼图 -->
<template>
  <view class="charts-box">
    <qiun-data-charts type="pie" :opts="opts" :chartData="chartData"/>
  </view>
</template>

<script>
	import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		components:{
			qiunDataCharts
		},
	props: {
		//x轴标题是否旋转
		xRotateLabel: {
			type: Boolean,
			default: false
		},
		xRotateAngle: {
			type: Number,
			default: 0
		},
		colors: {
			type: Array,
			default: () => ["#91CB74","#FAC858","#1890FF","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		},
		seriesData: {
			type: Array,
			default: () =>  []
		},
	},
	data() {
		return {
			chartData: {},
			opts: {}
		}
	},
	watch: {
		seriesData(val) {
			this.getServerData();
		}
	},
  created() {
    this.getServerData();
  },
  methods: {
    getServerData() {
		this.opts = {
			color: this.colors,
			padding: [5,5,5,5],
			enableScroll: false,
			legend: {
				show: true,
				position: "bottom",
				float: 'left',
				// lineHeight: 25,
				fontSize: 11,
				fontColor: '#333',
				itemGap: 4
			},
			extra: {
				pie: {
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		};
      setTimeout(() => {
        let res = {
            series: [
              {
                data: this.seriesData
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>